<template>
    <div class="list-container">
        <div class="list-wrapper mar_lr10 pad_tb_20 flex-bet curs">
            <div class="flex">
                <div class="list-title">
                    <div class="circle">
                        <div class="title-circle"></div>
                    </div>
                </div>
                <div>
                    <p class="list-title-header fon_15 color_3">打开自动接单</p>
                    <span class="fon_12 color_9">开通自动接单后，在线期间，将自动接单并打印</span>
                </div>
            </div>
            <div>
                <el-switch v-model="value"></el-switch>
            </div>
        </div>
        <div class="list-wrapper mar_lr10 pad_tb_20 flex-bet">
            <div class="flex">
                <div class="list-title">
                    <div class="circle">
                        <div class="title-circle list-title-error"></div>
                    </div>
                </div>
                <div>
                    <p class="fon_15 color_3">2 单待出餐</p>
                    <span class="fon_12 color_9">确认后骑手优先到店</span>
                </div>
            </div>
            <div>
                <span class="switchertext curs" @click="chucanList">去出餐</span>
            </div>
        </div>
        <el-dialog
                title="待出餐订单"
                :visible.sync="dialogVisible"
                width="30%"
                :close-on-click-modal="false"
               >
            <div>
                <div class="flex pad_lr_20 bor_b_df5 mar_b10 pad_b_10">
                    <div class="flex-g-0 subjectcolor2 fon_30">3</div>
                    <div class="flex-g-1 mar_l20">
                        <div>请尽快出餐</div>
                        <div class="color_9">顾客：朱先生</div>
                    </div>
                    <div class="flex-g-0">
                        <el-button type="primary">确认出餐</el-button>
                    </div>
                </div>
                <div class="flex pad_lr_20 bor_b_df5 mar_b10 pad_b_10">
                    <div class="flex-g-0 subjectcolor2 fon_30">4</div>
                    <div class="flex-g-1 mar_l20">
                        <div>请尽快出餐</div>
                        <div class="color_9">顾客：王先生</div>
                    </div>
                    <div class="flex-g-0">
                        <el-button type="primary" @click="qrchMethod">确认出餐</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {saveTel} from "@/api/order";

    export default {
        name: "orderSwitch",
        components: {},
        props: {

        },
        created() {
        },
        data() {
            return {
                form: {
                    id: '',
                    tel: "",
                    note: "",
                },
                dialogVisible: false,
                value: true,
            }
        },
        methods: {
            chucanList(){
                this.dialogVisible = true
            },
            qrchMethod(){
                console.log('123')
                this.$parent.$refs.orderList.orderListQrch('ccc')
            },
        }
    };
</script>
<style lang="scss" scoped>
    .list-container .list-wrapper {
        border-top: 1px solid #ebeff5;
    }

    .list-container .list-wrapper:hover {
        background-color: #f7f8fb;
    }

    .list-container div.list-wrapper:last-child {
        border-bottom: 1px solid #ebeff5;
    }

    .list-title {
        color: #2d2f33;
    }

    .circle {
        width: 50px;
    }

    .title-circle {
        margin: 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 9px;
        background-color: #f3a634;
    }

    .list-title-error {
        background-color: #fa5555;
    }

    .list-title-header {
        font-weight: 500;
    }

    .switchertext {
        color: #1989fa;
    }
</style>
